<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <link rel="stylesheet" href="css/amazeui.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>小社区</title>
</head>
<body>

<header data-am-widget="header"
        class="am-header am-header-default" style="background-color: #FF856E;">

    <div class="am-header-left am-header-nav">
        <span style="font-size: 18px;color: white;">&nbsp;小社区</span>
    </div>
    <div class="am-header-right am-header-nav">
        <a href="userCommunity.html" style="font-size: 18px;">
            <i class="am-icon-chevron-right" style="font-size: 22px;"></i>
        </a>
    </div>
</header>

<form class="am-form am-form-horizontal" style="margin-top: 3%;">
    <!-- am-form-group 的基础上添加了 am-form-group-sm -->
    <div class="am-form-group am-form-group-sm">
        <div class="am-u-sm-7 am-u-sm-offset-2">
            <input type="text" id="communityContent" class="am-form-field" placeholder="社区搜索"
                   style="line-height: 1.5em;border-radius: 20px;text-indent: 1em;box-shadow: none;outline: none;">
        </div>
        <label for="communityContent" class="am-u-sm-2 am-form-label am-u-sm-pull-1" style="margin-top:-2%;">
            <button class="am-btn am-btn-sm am-btn-warning" id="searchBtn" type="button" style="border-radius: 35px;outline: none;">搜索</button>
        </label>
    </div>

</form>

<ul style="padding-left: 0;" id="communityList">
</ul>

<div style="height: 60px;"></div>
<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default">
    <ul class="am-navbar-nav am-cf am-avg-sm-4" style="background-color: rgb(254,103,0)">
        <li>
            <a href="index.html" class="">
                <img src="img/home.svg" alt="首页"/>
                <span class="am-navbar-label">首页</span>
            </a>
        </li>
        <li>
            <a href="javascript:0;" class="">
                <img src="img/community-this.svg" alt="小社区"/>
                <span class="am-navbar-label" style="color: rgb(169,67,4)">小社区</span>
            </a>
        </li>
        <li>
            <div style="position: fixed;bottom: 2px;left: 40.3%;width: 19.2%;">
                <a href="createCommunity.html">
                    <img src="img/add.jpg" style="width: 60px; height: 60px; border-radius: 50%;box-shadow: darkgrey 0px -2px 10px 2px ;"/>
                </a>
            </div>
        </li>
        <li>
            <a href="order.html" class="">
                <img src="img/order.svg" alt="订单"/>
                <span class="am-navbar-label">订单</span>
            </a>
        </li>
        <li>
            <a href="me.html" class="">
                <img src="img/me.svg" alt="我的"/>
                <span class="am-navbar-label">我的</span>
            </a>
        </li>
    </ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>

<script type="text/javascript">

    $(function () {
        getCommunity();
    })


    $("#searchBtn").click(function () {
        let communityContent = $("#communityContent").val();
        if (communityContent != null || communityContent != "") {
            searchCommunity();
        }
    })

</script>
</html>